<!-- <template>
	<view>
		<u-form-item label="上传图片（选填）" prop="images" label-position="top">
			<js-uploadfile v-model="model.dataMap" :biz-key="model.id" biz-type="img"></js-uploadfile>
		    <button type="default" @click="get">获取ID</button>
		</u-form-item>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				model:{
					dataMap:null,
				}
			}
		},
		methods: {
			get(){
				console.log(JSON.stringify(this.model.dataMap))
			}
		}
	}
</script>

<style>

</style> -->





<template>
  <view class="container">
    <view class="upload-container"  style="display:inline-block">
	<view  >
	<view v-for="item in pictures" style="display:inline-flex" >
	<image :src="item" v-if="imageSrc" class="preview-image" style="height: 200rpx;width: 200rpx;" ></image>
	
	</view>
	<image src="../../../static/jeesite/pictureUpload.png" style="height: 200rpx;width: 200rpx;"  @tap="chooseImage"></image>
	</view>
	
	  
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageSrc: '', // 图片预览地址
		 formData:null,

		 
		 pictures:[],
    };
  },

  methods: {
    chooseImage() {
      uni.chooseImage({
        count: 9, // 默认9
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          const tempFilePaths = res.tempFilePaths;
          this.imageSrc = tempFilePaths; // 设置图片预览
			let baseUrl = this.vuex_config.baseUrl;
			let adminPath = this.vuex_config.adminPath;
			
			

			

		for (let i = 0; i < tempFilePaths.length; i++) {
			
			uni.uploadFile({
				url:baseUrl +adminPath + '/product/file/upload',
				filePath:tempFilePaths[i],
				name:'file',
				header: {
					'x-ajax':'json',
					'x-token':this.vuex_token,
					'x-remember':this.vuex_remember
				},
				complete: (res) => {
					console.log(res)
					const data = res.data;
					console.log(data);
					var parsedResponse = JSON.parse( res.data);
					console.log(parsedResponse);
					this.pictures.push(parsedResponse.data.url);
					console.log(this.pictures);
				}
			})
		}
			
				
		
			
		
         
        },
        fail: (err) => {
          console.error('选择图片失败', err);
        }
      });
    },

	

// 最接近成功
  
 //  chooseImage() {
 //    uni.chooseImage({
 //      count: 1,
 //      sizeType: ['original', 'compressed'],
 //      sourceType: ['album', 'camera'],
 //      success: async (res) => {
	// 	console.log(res);
 //        const tempFilePaths = res.tempFilePaths[0];
 //        this.imageSrc = tempFilePaths; // 设置图片预览
		
	// 	this.imgfile = new Blob([tempFilePaths], { type: 'image/jpeg' /* 根据实际图片类型调整 */ });
		
	// 	 console.log(this.imgfile);
	// 	console.log(this.imageSrc);
		
        
		
	// 	try {
	// 		// 假设 this.imgfile 是 Blob 对象
	// 		   const formData = new FormData();
	// 		   formData.append('file', this.imgfile, 'image.jpg'); // 第三个参数是可选的文件名
	// 		   console.log(formData);
	// 			const response = await this.$u.postFormData('/a/product/file/upload',{file: this.imgfile}, formData);
	// 			console.log(response);
		 
		 
		 
		 
		 
		 
		 
		 
		 
		 
	// 	  // const formData = { file: tempFilePaths };
 //          // const response = await this.$u.postFormData('/a/product/file/upload', this.imgfile);
		  
         
 //        } catch (err) {
 //          console.error('上传失败', err);
 //        }
		
		
		
		
 //      },
 //      fail: (err) => {
 //        console.error('选择图片失败', err);
 //      }
 //    });
	
	
	

	
	
	
 //  }
  
  
  
  
  
  
  // uni.uploadFile({
  //   url: 'http://www.clioc.com/js/a/product/file/upload',
  //   filePath: this.imageSrc,
  //   name: 'file', // 参数名要与后端接口匹配
  //   formData: {}, // 其他额外参数
  //   success: (uploadRes) => {
  //     console.log(uploadRes.data);
  //   },
  //   fail: (err) => {
  //     console.error('上传失败', err);
  //   }
  // });
  
  
  // getImageAsBlob(e){
	 //  this.imgfile = new Blob([e], { type: 'image/jpeg' /* 根据实际图片类型调整 */ });
	  	
  //    console.log(this.imgfile);
  // },
  
  
  
  
  // chooseImage() {
  //   uni.chooseImage({
  //     count: 1,
  //     sizeType: ['original', 'compressed'],
  //     sourceType: ['album', 'camera'],
  //     success: async (res) => {
  //       const tempFilePath = res.tempFilePaths[0];
        
  //       // 假设这里的getImageAsBlob是一个能从临时路径获取Blob的方法
  //       const blob = await this.getImageAsBlob(tempFilePath);
  
  //       try {
  //         const response = await this.$u.postFormDataWithBinary('http://www.clioc.com/js/a/product/file/upload', {}, blob, 'file');
  //         console.log(response.data);
  //       } catch (err) {
  //         console.error('上传失败', err);
  //       }
  //     },
  //     fail: (err) => {
  //       console.error('选择图片失败', err);
  //     }
  //   });
  // }
  
  

  

  
  
  
  
  
  
  
  }
};
</script>

<style scoped>


.upload-container {
  display: inline-block;
  margin: 20rpx;
}

.upload-btn {
  background-color: #007AFF;
  color: #fff;
  border-radius: 5px;
  padding: 10px 20px;
  margin-bottom: 20px;
}

.preview-image {
  width:70%;
  height: 70%;
  object-fit: cover;
}
</style>
